<template>
  <div class="room" :class="type()">
    <div class="room-number">{{ room.room }}</div>
    <div class="role-list2">
      <div class="role-btn">
        <span>经</span>
        <span>
          <i v-show="room.FDC_GCXT_ROLE_003 === 11" class="el-icon-close" />
          <i v-show="room.FDC_GCXT_ROLE_003 === 10" class="el-icon-check" />
        </span></div>
      <div class="role-btn">
        <span>总</span>
        <span>
          <i v-show="room.FDCGC_ZB11A === 11" class="el-icon-close" />
          <i v-show="room.FDCGC_ZB11A === 10" class="el-icon-check" />
        </span></div>
    </div>
    <div class="role-list">
      <div class="role-btn">
        <span>工</span>
        <span>
          <i v-show="room.FDC_GCXT_ROLE_007 === 11" class="el-icon-close" />
          <i v-show="room.FDC_GCXT_ROLE_007 === 10" class="el-icon-check" />
        </span></div>
      <div class="role-btn">
        <span>监</span>
        <span>
          <i v-show="room.FDC_GCXT_ROLE_005 === 11" class="el-icon-close" />
          <i v-show="room.FDC_GCXT_ROLE_005 === 10" class="el-icon-check" />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CheckRoom',
  props: {
    room: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
    }
  },
  created() { // 初始化

  },

  methods: {
    type() {
      let num = 0
      if (this.room.FDC_GCXT_ROLE_005) {
        num = num + this.room.FDC_GCXT_ROLE_005
      }
      if (this.room.FDC_GCXT_ROLE_007) {
        num = num + this.room.FDC_GCXT_ROLE_007
      }
      if (this.room.FDCGC_ZB11A) {
        num = num + this.room.FDCGC_ZB11A
      }
      if (this.room.FDC_GCXT_ROLE_003) {
        num = num + this.room.FDC_GCXT_ROLE_003
      }
      if (num < 0) {
        return 'warning'
      } else if (this.room.FDC_GCXT_ROLE_005 && this.room.FDC_GCXT_ROLE_005 === 11 ||
        this.room.FDC_GCXT_ROLE_007 && this.room.FDC_GCXT_ROLE_007 === 11 ||
        this.room.FDCGC_ZB11A && this.room.FDCGC_ZB11A === 11 ||
        this.room.FDC_GCXT_ROLE_003 && this.room.FDC_GCXT_ROLE_003 === 11) {
        return 'danger'
      } else {
        return 'primary'
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  .primary {
    background-color: #ecf5ff;
    border: 1px solid #d9ecff;
    color: #409EFF;
    .role-btn{
      span:nth-child(1) {
        color: #409EFF;
      }
    }
  }
  .danger {
    background-color: #ffeded;
    border: 1px solid #ffdbdb;
    color: #ff4949;
    .role-btn{
      span:nth-child(1) {
        color: #ff4949;
      }
    }
  }
  .warning {
    background-color: #fff8e6;
    border: 1px solid #fff1cc;
    color: #ffba00;
    .role-btn{
      span:nth-child(1) {
        color: #ffba00;
      }
    }
  }
  .room {
    display: inline-block;
    height: 120px;
    min-width: 120px;
    margin-left: 10px;
    cursor: pointer;
    .room-number {
      font-size: 30px;
      padding: 16px 10px 8px;
      text-align: center;
    }
    .role-list2 {
      margin-bottom: 6px;
    }
    .role-list2,
    .role-list {
      padding: 0 10px;
      display: flex;
      justify-content: space-around;
      .role-btn {
        border: 2px solid #ffffff;
        border-radius: 12px;
        width: 40px;
        display: flex;
        align-items: center;
        font-size: 12px;
        span:nth-child(1) {
          display: inline-block;
          text-align: center;
          margin-left: -1px;
          height: 18px;
          line-height: 18px;
          width: 18px;
          border-radius: 50%;
          background-color: white;
        }
        span:nth-child(2) {
          text-align: center;
          margin-left: 4px;
        }
      }
    }
  }
</style>
